<template>
  <div class="xtx-goods-page xtx-wrapper">
    <div class="container">
      <!-- 面包屑 -->
      <xtx-bread :parents="breadArr">{{ goods.name }}</xtx-bread>
      <!-- 商品信息 -->
      <div class="xtx-product-info">
        <!-- 商品图片 -->
        <div class="left">
          <goods-image :images="goods.mainPictures" :video="goods.mainVideos&&goods.mainVideos[0]"></goods-image>
          <div class="other">
            <ul>
              <li>
                <p>销量人气</p>
                <p>{{ goods.salesCount }}+</p>
                <p><a href="javascript:;"><i class="iconfont icon-task-filling"></i>销量人气</a></p>
              </li>
              <li>
                <p>商品评价</p>
                <p>{{ goods.commentCount }}+</p>
                <p><a href="javascript:;"><i class="iconfont icon-comment-filling"></i>查看评价</a></p>
              </li>
              <li>
                <p>收藏人气</p>
                <p>{{ goods.collectCount }}+</p>
                <p><a @click="addCollect" href="javascript:;"><i class="iconfont icon-favorite-filling"></i>收藏商品</a></p>
              </li>
              <li v-if="goods.brand">
                <p>品牌信息</p>
                <p>{{ goods.brand.name }}</p>
                <p><router-link :to="`/brand/${goods.brand.id}`"><i class="iconfont icon-dynamic-filling"></i>品牌主页</router-link></p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 商品信息 -->
        <div class="right">
          <h3 class="name">{{ goods.name }}</h3>
          <p class="desc">{{ goods.desc }}</p>
          <p class="price">
            <span class="now">¥{{ goods.price }}</span>
            <span class="old">¥{{ goods.oldPrice }}</span>
          </p>
          <div class="address">
            <div class="item">
              <div class="dt">促销</div>
              <div class="dd">12月好物放送，App领券购买直降120元</div>
            </div>
            <div class="item">
              <div class="dt">配送</div>
              <div class="dd">
                <span style="vertical-align: middle;padding-right:5px">至</span>
                <xtx-city ph="请选择配送地区" :level="3" :province-code="pCode" :city-code="cCode" :area-code="aCode" @change="changeCity"></xtx-city>
              </div>
            </div>
            <div class="item">
              <div class="dt">服务</div>
              <div class="dd">
                <span class="fw">无忧退货</span>
                <span class="fw">快速退款</span>
                <span class="fw">免费包邮</span>
                <a href="javascript:;" class="lj">了解详情</a>
              </div>
            </div>
          </div>
          <!-- 可选参数 -->
          <goods-sku
            v-if="goods.specs && goods.skus"
            :sku="goods.skus"
            :attrs="goods.specs"
            @on-change="setSkuInfo"
          ></goods-sku>
          <!-- 其他参数 -->
          <div class="attrs">
            <div class="item">
              <div class="dt">数量</div>
              <div class="dd">
                <goods-number v-model="cartForm.count" :max="stock"></goods-number>
              </div>
            </div>
            <div class="item">
              <a @click="addCart()" class="buy" href="javascript:;">加入购物车</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品推荐 -->
      <goods-relevant
        title="同类产品推荐"
        :id="+$route.params.id"
      ></goods-relevant>
      <!-- 商品详情 -->
      <div class="xtx-product-detail">
        <div class="main">
          <div class="cont">
            <div class="tab-head">
              <a href="javascript:;" :class="{active:activeTab==='detail'}" @click="activeTab='detail'">商品详情</a>
              <a href="javascript:;" :class="{active:activeTab==='comment'}" @click="activeTab='comment'">商品评价<span>（998+）</span></a>
            </div>
            <div class="tab-pane" v-show="activeTab==='detail'">
              <goods-detail v-if="goods.details" :detail="goods.details"></goods-detail>
            </div>
            <div class="tab-pane" v-show="activeTab==='comment'">
              <goods-comment :id="$route.params.id"></goods-comment>
            </div>
          </div>
          <goods-warn></goods-warn>
        </div>
        <goods-aside></goods-aside>
      </div>
    </div>
  </div>
</template>

<script>
import GoodsImage from './components/goods-image'
import GoodsRelevant from './components/goods-relevant'
import GoodsNumber from './components/goods-number'
import GoodsSku from './components/goods-sku'
import GoodsWarn from './components/goods-warn'
import GoodsAside from './components/goods-aside'
import GoodsDetail from './components/goods-detail'
import GoodsComment from './components/goods-comment'
export default {
  name: 'xtx-goods-page',
  components: {
    GoodsImage,
    GoodsRelevant,
    GoodsNumber,
    GoodsSku,
    GoodsWarn,
    GoodsAside,
    GoodsDetail,
    GoodsComment
  },
  data () {
    return {
      // 商品信息
      goods: {},
      // 商品库存
      stock: 100,
      // 添加购物车
      cartForm: {
        // 数量
        count: 1,
        // 选择的sku
        skuId: '',
        // 属性文字
        attrsText: ''
      },
      // tabs数据  detail-商品详情  comment-商品评价
      activeTab: 'detail',
      // 配送地区
      pCode: '',
      cCode: '',
      aCode: ''
    }
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getGoods()
  },
  created () {
    this.getGoods()
  },
  computed: {
    // 面包屑数组
    breadArr () {
      const arr = []
      if (this.goods.categories) {
        this.goods.categories.forEach((item, i) => {
          if (i === 0) arr.push({ path: `/category/${item.id}`, name: item.name })
          if (i === 1) arr.push({ path: `/category/sub/${item.id}`, name: item.name })
        })
      }
      return arr
    }
  },
  methods: {
    // 选择配送地区
    changeCity (e) {
      this.pCode = e.provinceCode
      this.cCode = e.cityCode
      this.aCode = e.areaCode
    },
    // 选择规格
    setSkuInfo (data) {
      this.cartForm.skuId = data.skuId
      this.cartForm.attrsText = data.attrsText
      this.stock = data.stock
      if (data.price && data.oldPrice) {
        this.goods.price = data.price
        this.goods.oldPrice = data.oldPrice
      }
      // 库存不足选择数量改1
      if (this.cartForm.count > this.stock) this.cartForm.count = 1
    },
    addCart () {
      if (!this.cartForm.skuId) {
        return this.$message({ message: '请选择商品规格', type: 'warn' })
      }
      // 添加购物车
      this.$store.dispatch('cart/addCart', {
        id: this.goods.id,
        name: this.goods.name,
        picture: this.goods.mainPictures[0],
        price: this.goods.price,
        nowPrice: this.goods.price,
        stock: this.goods.stock,
        ...this.cartForm
      })
    },
    getGoods () {
      this.$http.get('goods?id=' + this.$route.params.id).then((res) => {
        this.goods = {}
        this.$nextTick(() => {
          this.goods = res.data.result
          this.pCode = this.goods.defaultAddress.provinceCode
          this.cCode = this.goods.defaultAddress.cityCode
          this.aCode = this.goods.defaultAddress.countyCode
        })
      })
    },
    addCollect () {
      this.checkLogin(() => {})
    }
  }
}
</script>

<style scoped lang='less'>
@import "./styles/index.less";
</style>
